<template>
  <div id="app">
	<!-- 头部 -->
		<div class="header">
			<!-- 头部组件 -->
			<HeaderCom></HeaderCom>
		</div>

		<!-- 内容 -->
		<div class="content">
			<!-- 路由占位符 -->
			<router-view></router-view>
		</div>

		<!-- 底部 -->
		<div class="foot">
			<!-- 底部组件 -->
			<Footer></Footer>
		</div>
  </div>
</template>

<style scoeped>
	*{
		margin: 0;
		padding: 0;
	}
	li{
		list-style-type: none;
	}
	a{
		text-decoration: none;
		color: inherit;
	}
	#app{
		width: 800px;
		height: 600px;
		border: 1px solid black;
		margin: 0 auto;
	}
	.content{
		height:calc(100% - 120px);
	}
	
	.header,.foot{
		height: 60px;
		background: #F8E0AF;
	}
</style>
